import React, { useRef } from 'react'
import style from './style.module.scss'
import { Carousel } from 'antd'
import { SwapLeftOutlined, SwapRightOutlined } from '@ant-design/icons'
import Formatter from '../../../utils/Formatter'
import Configuration from '../../../config/Config.Dev'

interface IGoodsCardProps {
    id: string
    images: Array<string>
    title: string
    price: number
    onClick: (id: string) => void
}

export default function GoodsCard(props: IGoodsCardProps) {
    const banner = useRef<typeof Carousel>(null)

    return (
        <div className={style.goods__card} onClick={() => props.onClick(props.id)}>
            <div className={style.goods__card__show}>
                <Carousel ref={banner as any} dots={{ className: 'dot__black' }}>
                    {props.images?.map((image, index) => (
                        <div key={index}>
                            <div
                                className={style.goods__card__img}
                                style={{ backgroundImage: `url(${Configuration.IMAGE_URL_PREFIX}${image})` }}
                            />
                        </div>
                    ))}
                </Carousel>
            </div>
            <i
                className={`${style.btn} ${style.prev}`}
                onClick={e => {
                    ;(banner.current as any)?.prev()
                    e.stopPropagation()
                }}>
                <SwapLeftOutlined className={style.icon} />
            </i>
            <i
                className={`${style.btn} ${style.next}`}
                onClick={e => {
                    ;(banner.current as any)?.next()
                    e.stopPropagation()
                }}>
                <SwapRightOutlined className={style.icon} />
            </i>
            <div className={style.goods__detail}>
                <p className={style.goods__title}>{props.title}</p>
                <p className={style.goods__price}>{Formatter.toThousands(props.price)}</p>
            </div>
        </div>
    )
}
